<template>
  <component
    v-for="option in options"
    :is="checkboxComponent"
    :key="option[keyAlias]"
    :label="option[labelAlias]"
    :value="option[valueAlias]"
    :disabled="option[disabledAlias]"
    v-bind="option"
  >
    <!-- 可插入自定义插槽内容 -->
    <slot :option="option" />
  </component>
</template>

<script>
import { ElCheckbox, ElCheckboxButton } from 'element-plus'

export default {
  name: 'RenderCheckboxOptions',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    componentProps() {
      return this.item.componentProps || {}
    },
    options() {
      return this.componentProps.options || []
    },
    labelAlias() {
      return (this.componentProps.props && this.componentProps.props.label) || 'label'
    },
    valueAlias() {
      return (this.componentProps.props && this.componentProps.props.value) || 'value'
    },
    disabledAlias() {
      return (this.componentProps.props && this.componentProps.props.disabled) || 'disabled'
    },
    checkboxComponent() {
      return this.item.component === 'CheckboxGroup' ? ElCheckbox : ElCheckboxButton
    }
  }
}
</script>
